<template>
  <div>
    <div @click="fh()" class="btn">
      <span class="h1">绑定银行卡</span>
    </div>
    <div class="btn2">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <i class="el-icon-arrow-left" style="font-size: 20px" @click="l1"></i>
          <van-field
            v-model="onSubmit.bankname"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="onSubmit.userbank"
            type="password"
            name="证件号码"
            label="证件号码"
            placeholder="证件号码"
            :rules="[{ required: true, message: '请填写证件号码' }]"
          />
          <van-field
            v-model="onSubmit.cardNumber"
            type="password"
            name="银行卡号"
            label="银行卡号"
            placeholder="银行卡号"
            :rules="[{ required: true, message: '请填写银行卡号' }]"
          />
<!--          <button @click="identifyBank">识别银行名称</button>-->
          <p v-if ="bankName!==null">{{ bankName }}</p>
          <van-field
            v-model="onSubmit.bankphone"
            type="password"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="onSubmit.cardName"
            type="text"
            name="银行卡名"
            label="银行卡名"
            placeholder="银行卡名"
            :rules="[{ required: true, message: '请填写银行卡名' }]"
          />
        </van-cell-group>
      </van-form>
    </div>

    <div style="margin: 16px;">
      <van-button @click="toSubmit()">提交</van-button>
    </div>


  </div>
</template>

<style scoped>

.form1__label {
  font-size: 20px;

}
.van-button {
  width: 300px;
  height: 45px;
  margin-top: 50px;
  background-color: #7db0ff;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
}
.btn2 {
  margin-top: 100px;
}
.btn3 {
  margin-top: 52px;
}
.span1 {
  margin-top: -30px;
  font-weight: bold;
}
.h1 {
  margin-top: -62px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 53px;
}
.h2 {
  margin-top: -62px;
  color: #ffffff;
  font-size: 30px;
  line-height: 53px;
  margin-left: -360px;
}
.btn1 {
  margin-top: -53px;
}
.btn {
  margin-top: -58px;
  width: 100%;
  height: 53px;
  background-color: #7db9ce;
}
</style>
<script>
import axios from "axios";
export default {
  data() {
    return {
      onSubmit: {},
      cardNumber: '',
      bankName: null
    };
  },
  methods: {
    async identifyBank() {
      try {
        const response = await axios.post('/identifyBank', this.cardNumber);
        this.bankName = response.data;
      } catch (error) {
        console.error('识别银行名称出错：', error);
        this.bankName = '识别过程出现错误，请稍后再试';
      }
    },
    l1(){
      this.$router.push('/card');
    },
    // 提交表单的方法
    toSubmit() {
      axios.post("/order/NCard/add", this.onSubmit).then(res => {
        if (res.code = 200) {
          this.$router.push('/card')
        }else{
          this.$toast("该银行卡不符合实际");
        }

      })
    }
  }
}
</script>
